<template>
  <div class="action-bar">
    <div class="btn-list">
      <div v-if="hasAppAuth && judgePermission(pageNo, 'appFunc')" class="btn-item">
        <img v-if="funcAppAuthActive" src="~@/assets/action-bar-icon/App-active.png" @click="funcAppAuthShow" />
        <img v-else class="not-allowed" src="~@/assets/action-bar-icon/App.png" />
      </div>
      <!-- <div v-if="hasFuncAuth&& judgePermission(pageNo, 'func')" class="btn-item"> -->
      <div v-if="hasFuncAuth" class="btn-item">
        <img v-if="funcAuthActive" src="~@/assets/action-bar-icon/func-auth-active.png" @click="funcAuthShow" />
        <img v-else class="not-allowed" src="~@/assets/action-bar-icon/func-auth.png" />
      </div>
      <div v-if="hasAssignRole && judgePermission(pageNo, 'role')" class="btn-item">
        <img v-if="assignRole" src="~@/assets/action-bar-icon/assign-role-active.png" @click="assignRoleShow" />
        <img v-else class="not-allowed" src="~@/assets/action-bar-icon/assign-roles-no.png" />
      </div>
      <!-- <div v-if="hasEdit&& judgePermission(pageNo, 'edit')" class="btn-item"> -->
      <div v-if="hasExport" class="btn-item">
        <img v-if="exportActive" src="~@/assets/action-bar-icon/export-active.png" @click="exportFile" />
        <img v-else class="not-allowed" src="~@/assets/action-bar-icon/export.png" />
      </div>
      <!-- <div v-if="hasAdd&& judgePermission(pageNo, 'add')" class="btn-item"> -->
      <div v-if="hasAdd" class="btn-item">
        <img v-if="addActive" src="~@/assets/action-bar-icon/add-active.png" @click="add" />
        <img v-else class="not-allowed" src="~@/assets/action-bar-icon/add.png" />
      </div>
      <!-- <div v-if="hasEdit&& judgePermission(pageNo, 'edit')" class="btn-item"> -->
      <div v-if="hasEdit" class="btn-item">
        <img v-if="editActive" src="~@/assets/action-bar-icon/edit-active.png" @click="edit" />
        <img v-else class="not-allowed" src="~@/assets/action-bar-icon/edit.png" />
      </div>
      <!-- <div v-if="hasDel&& judgePermission(pageNo, 'delete')" class="btn-item"> -->
      <div v-if="hasDel" class="btn-item">
        <img v-if="delActive" src="~@/assets/action-bar-icon/del-active.png" @click="del" />
        <img v-else class="not-allowed" src="~@/assets/action-bar-icon/del.png" />
      </div>
      <div v-if="hasSave" class="btn-item">
        <img v-if="saveActive" src="~@/assets/action-bar-icon/save-active.png" @click="save" />
        <img v-else class="not-allowed" src="~@/assets/action-bar-icon/save.png" />
      </div>
      <div v-if="hasCancel" class="btn-item">
        <img v-if="cancelActive" src="~@/assets/action-bar-icon/cancel-active.png" @click="cancel" />
        <img v-else class="not-allowed" src="~@/assets/action-bar-icon/cancel.png" />
      </div>
      <div v-if="hasImportData" class="btn-item">
        <el-upload class="upload" action="#" :show-file-list="false" :on-change="handleExcel" accept=".xlsx,.xls"
          :auto-upload="false" :headers="headers">
          <el-button class="uploadBtn" size="mini" type="primary" @click="importData"><i class="el-icon-upload2"></i>
            导入</el-button>
        </el-upload>
      </div>
      <div v-if="hasImportData" class="btn-item">
        <div class="upDownBtn" @click="upDownFile"><i class="el-icon-download"></i>下载模板</div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import axios from "axios";
export default {
  name: "",
  components: {},
  props: {
    upDownApi: {
      type: String,
      default: ''
    },
    importApi: {
      type: String,
      default: ''
    },
    pageNo: {
      type: Number,
      default: null
    },
    // 维修作废
    hasCancellation: {
      type: Boolean,
      default: false
    },
    cancellationActive: {
      type: Boolean,
      default: false
    },
    // 再次申请
    hasAuditAgain: {
      type: Boolean,
      default: false
    },
    auditAgainActive: {
      type: Boolean,
      default: false
    },
    // // 验收通过
    // hasAcceptance: {
    //   type: Boolean,
    //   default: false
    // },
    // acceptanceActive: {
    //   type: Boolean,
    //   default: false
    // },
    // // 验收不通过
    // hasNoAcceptance: {
    //   type: Boolean,
    //   default: false
    // },
    // noAcceptanceActive: {
    //   type: Boolean,
    //   default: false
    // },
    // 审核通过
    hasCheck: {
      type: Boolean,
      default: false
    },
    checkActive: {
      type: Boolean,
      default: false
    },
    // 审核不通过
    hasNocheck: {
      type: Boolean,
      default: false
    },
    nocheckActive: {
      type: Boolean,
      default: false
    },
    // 功能权限
    hasFuncAuth: {
      type: Boolean,
      default: false
    },
    funcAuthActive: {
      type: Boolean,
      default: false
    },
    // App功能权限
    hasAppAuth: {
      type: Boolean,
      default: false
    },
    funcAppAuthActive: {
      type: Boolean,
      default: false
    },
    // 角色分配
    hasAssignRole: {
      type: Boolean,
      default: false
    },
    assignRole: {
      type: Boolean,
      default: false
    },
    // // 用户
    // hasAssignUser: {
    //   type: Boolean,
    //   default: false
    // },
    // assignUser: {
    //   type: Boolean,
    //   default: false
    // },
    // 添加
    hasAdd: {
      type: Boolean,
      default: true
    },
    hasImportData: {
      type: Boolean,
      default: false
    },
    hasActive: {
      type: Boolean,
      default: true
    },
    hasExport: {
      type: Boolean,
      default: false
    },
    // 修改
    hasEdit: {
      type: Boolean,
      default: false
    },
    addActive: {
      type: Boolean,
      default: false
    },
    editActive: {
      type: Boolean,
      default: false
    },

    exportActive: {
      type: Boolean,
      default: true
    },
    // 删除
    hasDel: {
      type: Boolean,
      default: true
    },
    delActive: {
      type: Boolean,
      default: false
    },
    // 保存
    hasSave: {
      type: Boolean,
      default: false
    },
    saveActive: {
      type: Boolean,
      default: false
    },
    // 取消
    hasCancel: {
      type: Boolean,
      default: false
    },
    cancelActive: {
      type: Boolean,
      default: false
    },
    // // 查看用户
    // hasEmployee: {
    //   type: Boolean,
    //   default: false
    // },
    // employeeActive: {
    //   type: Boolean,
    //   default: false
    // }
  },
  data () {
    return {
      headers: { "Content-Type": "multipart/form-data;charset=UTF-8" }
    };
  },
  computed: {
    ...mapGetters({
      judgePermission: "permission/judgePermission"
    })
  },
  watch: {},
  created () { },
  mounted () { },
  methods: {
    getContentExport (content, paraName) {
      if (!content) return;
      const blob = new Blob([content]);
      if ("download" in document.createElement("a")) {
        // 非IE下载
        const elink = document.createElement("a");
        elink.download = paraName;
        elink.style.display = "none";
        elink.href = URL.createObjectURL(blob);
        document.body.appendChild(elink);
        elink.click();
        URL.revokeObjectURL(elink.href); // 释放URL 对象
        document.body.removeChild(elink);
      } else {
        // IE10+下载
        navigator.msSaveBlob(blob, file);
      }
      // this.$message({
      //   type: 'success',
      //   message: '操作成功!'
      // })
    },
    upDownFile () {
      if (!this.upDownApi) return;
      let url = this.upDownApi;
      axios({
        url: this.$baseurl.webServiceUrl + url,
        method: "get",
        responseType: 'blob',
        headers: {
          Token: sessionStorage.token,
          Homebaseid: sessionStorage.getItem('homeBaseId'),
        }
      }).then(res => {
        let fileName = decodeURIComponent(res.headers['content-disposition'].split(';')[1].replace('filename=', ''))
        this.getContentExport(res.data, fileName)
        if (res.data && fileName) {
          this.$message.success('下载成功！')
        } else {
          this.$message.error('下载失败！')
        }
      }).catch(err => {
        this.$message.error('下载失败！')
      });
    },
    handleExcel (file) {
      if (!this.importApi) return;
      let url = this.importApi;
      let formData = new FormData(); //声明一个FormDate对象
      formData.append("excel", file.raw);    //把文件信息放入对象中
      //调用后台导入的接口
      axios({
        url: this.$baseurl.webServiceUrl + url,
        method: "post",
        data: formData,
        responseType: 'blob',
        headers: {
          Token: sessionStorage.token,
          Homebaseid: sessionStorage.getItem('homeBaseId')
        }
      }).then(res => {
        let that = this
        if (res.data.type == 'application/json') {
          console.log('导入成功！', res)
          const reader = new FileReader();
          reader.readAsText(res.data, 'utf-8');
          reader.onload = function (e) {
            const readerres = reader.result;
            const parseObj = JSON.parse(readerres);
            if (parseObj.success) {
              that.$message.success('导入成功！')
            } else {
              that.$message.success('导入失败！')
            }
          }
        } else {
          let fileName = decodeURIComponent(res.headers['content-disposition'].split(';')[1].replace('filename=', ''))
          this.getContentExport(res.data, fileName)
          this.$message.error('导入表格部分数据有误！')
        }
        this.$emit('getNewlistData')
      }).catch(err => {
        this.$message.error('导入失败！')
      });
    },
    exportFile () {
      this.$emit("exportFile");
    },
    add () {
      this.$emit("add");
    },
    edit () {
      this.$emit("edit");
    },
    del () {
      this.$emit("del");
    },
    save () {
      this.$emit("save");
    },
    // 再次申请
    auditAgainShow () {
      this.$emit("auditAgain");
    },
    // 验收通过
    acceptanceShow () {
      this.$emit("acceptance");
    },
    // 验收不通过
    noAcceptanceShow () {
      this.$emit("noAcceptance");
    },
    // 审核通过
    checkShow () {
      this.$emit("check");
    },
    // 审核不通过
    nocheckShow () {
      this.$emit("nocheck");
    },
    // 处理
    handleShow () {
      this.$emit("handle");
    },
    // 功能权限
    funcAuthShow () {
      this.$emit("funcAuth");
    },
    // App功能权限
    funcAppAuthShow () {
      this.$emit("funcAppAuth");
    },
    // 数据权限
    dataAuthShow () {
      this.$emit("dataAuth");
    },
    // 分配角色
    assignRoleShow () {
      this.$emit("assignRole");
    },
    assignRoleUser () {
      this.$emit("assignRoleUser");
    },
    cancel () {
      this.$emit("cancel");
    },
    importData () {
      this.$emit("importData");
    }
  }
};
</script>

<style scoped lang="scss">
@import "~@/styles/variables.scss";

.action-bar {
  width: 100%;
  height: $actionBarHeight;
  border-radius: 5px;
  background-color: $actionBarBgColor;
  display: flex;
  align-items: center;
  justify-content: flex-end;

  .btn-list {
    display: flex;
    align-items: center;
    padding-right: 18px;

    .btn-item {
      margin-left: 15px;
      height: 30px;

      img {
        height: 30px;
        cursor: pointer;
      }

      .not-allowed {
        cursor: not-allowed;
      }
    }
  }
}

.uploadBtn,
.upDownBtn {
  padding: 0 7px;
  line-height: 26px;
  border-radius: 4px;
  background: #ec8805;
  color: #ffffff;
  border: 2px solid #b46703;
  cursor: pointer;
}

.upDownBtn {
  background: #00b46f;
  border: 2px solid #027c4d;
}
</style>
